import React, { useState,useCallback } from 'react'
import './Zhu.css'
import { Toast } from 'antd-mobile'
import { useNavigate,} from 'react-router-dom'
import Captcha from 'react-captcha-code';
import instance from '../http/instance'
export default function Zhu() {
    const hand = useCallback((captcha)=>{
        console.log('captcha',captcha);
        setcap(captcha)
    },[])
    const [cap,setcap] = useState('')
    const nav = useNavigate()
    const [phon,setphon] = useState('')
    const [pwd,setpwd] = useState('')
    const [tux,settu] = useState('')
    const Tdeng=()=>{
        nav('/login')
    }
    const zhuce=async()=>{
        if(tux==cap){  
            await instance.post(`http://localhost:8000/zhuce`,{phon:phon,pwd:pwd})
        alert('验证码已发送')
        await instance.post(`http://localhost:8000/get_sms`, { phone: phon })
        console.log(phon);
        nav(`/yzm?phon=${phon}&pwd=${pwd}`)
        }else{
            Toast.show({
                icon: 'fail',
                content: '图形验证码错误'
      
              })
        }
        
    }

    return (
        <div>
            <div className='gu_deng'>
                <div className='gu_Zxin'>
                <svg onClick={Tdeng} t="1732936856369" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6021" width="32" height="32"><path d="M631.04 161.941333a42.666667 42.666667 0 0 1 63.061333 57.386667l-2.474666 2.730667-289.962667 292.245333 289.706667 287.402667a42.666667 42.666667 0 0 1 2.730666 57.6l-2.474666 2.752a42.666667 42.666667 0 0 1-57.6 2.709333l-2.752-2.474667-320-317.44a42.666667 42.666667 0 0 1-2.709334-57.6l2.474667-2.752 320-322.56z" fill="#111111" p-id="6022"></path></svg>
                </div>
                <h2 className='gu_Zh'>注册</h2>
                <p className='gu_Zp'>完善下面信息，快来交友吧！</p>
                <div className='gu_inp'>
                    <input className='gu_i' type="text" placeholder='请输入手机号' value={phon} onChange={(e)=>{
                        setphon(e.target.value)
                    }} /><br />
                    <input className='gu_i' type="text" placeholder='密码' value={pwd} onChange={(e)=>{
                        setpwd(e.target.value)
                    }} /><br />
                    <input className='gu_iyzm' type="text" placeholder='验证码' value={tux} onChange={(e)=>{
                        settu(e.target.value)
                    }}  /> <span className='yzm'  style={{marginLeft:"15px",marginTop:"15px"}}><Captcha charNum={4} onChange={hand}></Captcha></span> <br />
                    <button className='gu_btn' onClick={zhuce}>注册</button><br />
                    <div className='gu_s'>-第三方登录-</div><br />
                    <div className='gu_foot'>
                        <span className='gu_m'>已有账户？</span><span className='gu_zhu' onClick={Tdeng}>登录</span>
                    </div>

                </div>
            </div>
        </div>
    )
}
